<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心</title>
    <!-- 引入最新版本的jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 50px auto;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .user-info {
            margin-bottom: 30px;
        }
        .user-info p {
            margin: 10px 0;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 3px;
        }
        .user-info strong {
            display: inline-block;
            width: 120px;
        }
        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        .btn-danger {
            background-color: #f44336;
        }
        .btn:hover {
            opacity: 0.9;
        }
        .message {
            margin: 15px 0;
            padding: 10px;
            border-radius: 3px;
            display: none;
        }
        .success {
            background-color: #dff0d8;
            color: #3c763d;
        }
        .error {
            background-color: #f2dede;
            color: #a94442;
        }
        .loading {
            text-align: center;
            margin: 20px 0;
        }
        .actions {
            margin-top: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>用户中心</h2>
        
        <div id="message-success" class="message success"></div>
        <div id="message-error" class="message error"></div>
        
        <div class="loading">
            加载中，请稍候...
        </div>
        
        <div class="user-info" style="display: none;">
            <p><strong>用户名：</strong><span id="username"></span></p>
            <p><strong>注册时间：</strong><span id="create-time"></span></p>
            <p><strong>最后登录：</strong><span id="update-time"></span></p>
            <p><strong>账号状态：</strong><span id="status"></span></p>
        </div>
        
        <div class="actions">
            <button id="logout-btn" class="btn btn-danger">退出登录</button>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 检查登录状态并获取用户信息
            checkLoginAndLoadInfo();
            
            // 退出登录按钮点击事件
            $('#logout-btn').on('click', function() {
                logout();
            });
            
            // 检查登录状态并加载用户信息
            function checkLoginAndLoadInfo() {
                $.ajax({
                    url: '/user/checkLogin',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if (response.code !== 1) {
                            // 未登录，跳转到登录页
                            window.location.href = '/user/login_page';
                            return;
                        }
                        
                        // 已登录，获取用户详细信息
                        getUserInfo();
                    },
                    error: function() {
                        showError('网络错误，请稍后再试');
                        setTimeout(function() {
                            window.location.href = '/user/login_page';
                        }, 1500);
                    }
                });
            }
            
            // 获取用户信息
            function getUserInfo() {
                $.ajax({
                    url: '/user/info',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        $('.loading').hide();
                        
                        if (response.code === 1) {
                            // 显示用户信息
                            var user = response.data;
                            $('#username').text(user.username);
                            $('#create-time').text(formatTimestamp(user.create_time));
                            $('#update-time').text(formatTimestamp(user.update_time));
                            $('#status').text(user.status === 1 ? '正常' : '已禁用');
                            
                            // 显示用户信息区域
                            $('.user-info').show();
                        } else {
                            showError(response.msg || '获取用户信息失败');
                            setTimeout(function() {
                                window.location.href = '/user/login_page';
                            }, 1500);
                        }
                    },
                    error: function() {
                        $('.loading').hide();
                        showError('网络错误，请稍后再试');
                    }
                });
            }
            
            // 退出登录
            function logout() {
                $.ajax({
                    url: '/user/logout',
                    type: 'POST',
                    dataType: 'json',
                    success: function(response) {
                        if (response.code === 1) {
                            showSuccess(response.msg || '已退出登录');
                            setTimeout(function() {
                                window.location.href = 'login.html';
                            }, 1500);
                        } else {
                            showError(response.msg || '退出失败');
                        }
                    },
                    error: function() {
                        showError('网络错误，请稍后再试');
                    }
                });
            }
            
            // 格式化时间戳
            function formatTimestamp(timestamp) {
                if (!timestamp) return '未知';
                
                var date = new Date(timestamp * 1000);
                return date.getFullYear() + '-' + 
                       padZero(date.getMonth() + 1) + '-' + 
                       padZero(date.getDate()) + ' ' + 
                       padZero(date.getHours()) + ':' + 
                       padZero(date.getMinutes()) + ':' + 
                       padZero(date.getSeconds());
            }
            
            // 数字补零
            function padZero(num) {
                return num < 10 ? '0' + num : num;
            }
            
            // 显示成功消息
            function showSuccess(message) {
                $('#message-success').text(message).show();
            }
            
            // 显示错误消息
            function showError(message) {
                $('#message-error').text(message).show();
            }
        });
    </script>
</body>
</html>